<!DOCTYPE html>
<meta charset="UTF-8">
<title>分页(cc-pagination)</title>
<link rel="import" href="../../common/layout.html">

<style>
	.demo {
		margin-bottom: 3em;
	}
	.demo grid {
		width: 400px;
		height: 240px;
	}
</style>

<main ng-app="demoApp" ng-controller="DemoCtrl as ctrl">
	<div class="demo">
		<h3>type: normal</h3>
		<cc-pagination
				type="normal"
				page-num="ctrl.pageOptions.pageNum"
				page-size="ctrl.pageOptions.pageSize"
				totals="ctrl.pageOptions.totals"
				total-pages="ctrl.pageOptions.totalPages"
				on-change="ctrl.onPageChange(pageNum, pageSize)"></cc-pagination>
	</div>
	<div class="demo">
		<h3>type: simple</h3>
		<cc-pagination
				type="simple"
				page-num="ctrl.pageOptions.pageNum"
				page-size="ctrl.pageOptions.pageSize"
				page-size-list="ctrl.pageOptions.pageSizeList"
				totals="ctrl.pageOptions.totals"
				total-pages="ctrl.pageOptions.totalPages"
				on-change="ctrl.onPageChange(pageNum, pageSize)"></cc-pagination>
	</div>
	<div class="demo">
		<h3>type: normal &amp; disable pagesize list</h3>
		<cc-pagination
				page-num="ctrl.pageOptions.pageNum"
				page-size="ctrl.pageOptions.pageSize"
				page-size-list="ctrl.pageOptions.pageSizeList"
				page-size-list-disabled
				totals="ctrl.pageOptions.totals"
				total-pages="ctrl.pageOptions.totalPages"
				on-change="ctrl.onPageChange(pageNum, pageSize)"></cc-pagination>
	</div>
	<div class="demo">
		<h3>type: normal &amp; hide pagesize list</h3>
		<cc-pagination
				page-num="ctrl.pageOptions.pageNum"
				page-size="ctrl.pageOptions.pageSize"
				page-size-list="ctrl.pageOptions.pageSizeList"
				page-size-list-hidden="true"
				totals="ctrl.pageOptions.totals"
				total-pages="ctrl.pageOptions.totalPages"
				on-change="ctrl.onPageChange(pageNum, pageSize)"></cc-pagination>
	</div>
</main>

<script src="/components.js"></script>
<script>
	angular
		.module('demoApp', ['ccms.components'])
		.controller('DemoCtrl', DemoCtrl);

	DemoCtrl.$inject = [];
	function DemoCtrl() {

		this.pageOptions = {
			pageNum: 1,
			pageSize: 8,
			pageSizeList: [8],
			totals: 50,
			totalPages: 3
		};
		this.onPageChange = (pageNum, pageSize) => {
			// 获取业务数据...

			// 统计并更新 pageOptions 的对应字段
			let pageOptions = this.pageOptions;
			pageOptions.pageNum = pageNum;
			pageOptions.pageSize = pageSize;
			pageOptions.totals = 50;
			pageOptions.totalPages = Math.ceil(pageOptions.totals / pageSize);
		}
	}
</script>

